<template>
  <div class="box">
    <div class="title">
      <!-- 第一个插槽，通过 name 指定名字 title -->
      <slot name="title">
        <h4>默认面板标题</h4>
      </slot>
      <span
        class="btn"
        @click=" isShow = !isShow "
      >
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <div
      class="container"
      v-show="isShow"
    >
      <!-- 第二个插槽，通过 name 指定名字 content -->
      <slot name="content">
        <p>默认面板内容</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 为了方便查看传递过来的HTML结构，默认展开面板
      isShow: true
    }
  }
};
</script>


<style scoped>
</style>